<template>
	<view class="eventRegistrationNotice">
		<text class="topText">宜趣多资免单购活动报名须知</text>
		<scroll-view scroll-y="true" @scrolltolower="scrolltolower">
			<view class="" v-html="data.content">

			</view>
		</scroll-view>

	<!-- 	<view class="btn">
			<text @tap="handeClick" :class="data.bool?'active':''">已经阅读</text>
		</view> -->
		<u-popup z-index="1" round="20" mode="bottom" :show="data.show" @close="()=>{data.show = false}">
			<view class="popupTop">
				<view :class="data.num == 0?'active':''" @tap="data.num = 0">
					活动规则详情
				</view>
				<view :class="data.num == 1?'active':''" @tap="data.num = 1">
					活动店铺要求
				</view>
			</view>
			<RuleRequirements :content="data.content1" v-if="data.num == 0" />
			<StoreRequirements :storeInfo="data.storeInfo" v-else />
			<view class="popupBot">
				<text @tap="handeClick1">立即参与</text>
			</view>
		</u-popup>
	</view>
</template>

<script setup lang="ts">
	import RuleRequirements from './components/ruleRequirements.vue'
	import StoreRequirements from './components/storeRequirements.vue'
	import { queryFreeBuyActivity, storeQualification, storeJoinActivity } from '@/utils/api/freeShipping'
	import { reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app';
	const data = reactive({
		bool: false,
		show: false,
		num: 0,
		content: '',
		content1: '',
		storeInfo: { finalResult: false }
	})
	onLoad(({type})=>{
		queryFreeBuyActivity().then((res) => {
			let key = 'sellerDesc'
			if(type == 'buyer'){
				key = 'buyerDesc'
			}
			res.data.ruleDesc = res.data.ruleDesc.replace(/<img/g, '<img style=width:100%')
			data.content = res.data[key];
			data.content1 = res.data.ruleDesc;
		})
	})
	storeQualification().then((res) => {
		data.storeInfo = res.data;
	})
	
	const scrolltolower = () => {
		data.bool = true;
	}
	const handeClick1 = () => {
		if (!data.storeInfo.finalResult) {
			uni.showToast({
				title: '当前资质不满足!',
				icon: 'none'
			})
			return
		}
		storeJoinActivity()
		navTo('/pages/newCustomerReduction/index')
	}
	const handeClick = () => {
		if (data.bool) {
			data.show = true;
		}
	}
	const navTo = (url : string) => {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss">
	.popupBot {
		padding: 10rpx 56rpx 30rpx 56rpx;
		border-top: 2rpx solid #F4F6FA;

		text {
			display: inline-block;
			width: 100%;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			border-radius: 88rpx;
			background: #FF263F;
		}
	}

	.popupTop {
		justify-content: center;
		display: flex;
		padding: 32rpx 0 16rpx 0;
		border-bottom: 2rpx solid #F4F6FA;

		view {
			color: #595959;
			font-size: 32rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			&::after {
				margin-top: 6rpx;
				content: '';
				display: inline-block;
				width: 64rpx;
				height: 8rpx;
				border-radius: 8rpx;

			}
		}

		>view:nth-of-type(1) {
			margin-right: 20rpx;
		}

		.active {
			color: #212121;

			&::after {
				background: #FF263F;
			}
		}
	}

	.eventRegistrationNotice {
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding-bottom: 30rpx;

		scroll-view {
			flex: 1;
			overflow: auto;
			padding: 28rpx;

			.view {
				line-height: 1.5;
			}
		}

		.topText {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			padding: 0 28rpx;
		}

		.btn {
			padding-top: 10rpx;
			border-top: 2rpx solid #F0F0F0;
			display: flex;
			justify-content: center;

			text {
				width: 638rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 88rpx;
				font-size: 32rpx;
				color: #fff;
				background-color: rgb(255, 168, 178);
			}

			.active {
				background: #FF263F;
			}
		}
	}
</style>